<app-notification />
<ng-container *ngIf="data.banner === 'team-not-found'">
  <app-missing [args]="notFound()" />
</ng-container>
<div
  class="mx-auto max-w-screen-xl pb-8 lg:pt-8 2xl:max-w-screen-2xl"
  *ngIf="!data.banner">
  <div
    class="space-y-4 lg:flex lg:space-y-0 lg:divide-x-2 lg:divide-gray-200 dark:lg:divide-gray-700">
    <aside>
      <div
        class="container mx-auto flex items-center justify-between px-4 pt-4 lg:sticky lg:top-24 lg:h-[calc(100vh-8rem)] lg:w-64 lg:flex-col lg:items-stretch lg:py-0">
        <nav class="hidden lg:block">
          <ul class="flex space-x-1 lg:flex-col lg:space-y-1 lg:space-x-0">
            <ng-container *ngFor="let tab of data.tabs">
              <li
                class="wsl-page-nav-item"
                [ngClass]="{ 'wsl-tab-active': tab.type === data.tab?.type }"
                *ngIf="tab.shown"
                (click)="switchTab(tab.type)">
                <ng-icon [name]="tab.icon" size="1.25rem" />
                <p>{{ tab.name }}</p>
                <span *ngIf="tab.counter">{{ tab.counter }}</span>
              </li>
            </ng-container>
          </ul>
        </nav>
        <div
          class="order-1 text-sm lg:order-2"
          aria-current="page"
          wslDropdown
          *ngIf="data.team?.name">
          <button
            class="wsl-dropdown-toggle cursor-pointer dark:text-gray-300 lg:w-full"
            type="button"
            id="wsl-teams-dropdown"
            aria-haspopup="true"
            aria-expanded="false">
            <div
              class="flex items-center rounded-md border-gray-100 bg-white p-2 shadow-sm dark:bg-gray-800 lg:hidden">
              <span>
                Team:
                <b class="font-medium">{{ data.team?.name }}</b>
              </span>
              <ng-icon name="heroChevronDown" class="opacity-50" />
            </div>
            <div
              class="hidden w-full items-center rounded-md p-2 hover:bg-gray-200 hover:bg-opacity-50 dark:hover:bg-gray-800 lg:flex">
              <div class="flex flex-grow items-center space-x-2">
                <div
                  class="h-10 w-10 items-center justify-center rounded-full bg-gray-200 text-center text-2xl text-white dark:bg-gray-700 dark:text-gray-400">
                  {{ data.team.name[0].toLocaleUpperCase() }}
                </div>
                <div class="text-black dark:text-gray-300 lg:text-left">
                  <p class="font-light">Team</p>
                  <p class="font-medium">{{ data.team.name }}</p>
                </div>
              </div>
              <div>
                <ng-icon
                  name="heroChevronDown"
                  class="text-black dark:text-gray-300" />
              </div>
            </div>
          </button>
          <ul
            class="wsl-dropdown-menu hidden w-full lg:bottom-16"
            aria-labelledby="wsl-teams-dropdown">
            <li
              *ngFor="let teamItem of data.teams.active"
              (click)="switchPage(teamItem.slug)"
              class="wsl-dropdown-item"
              [ngClass]="{
                'bg-sky-100 dark:bg-gray-800': data.team?.slug === teamItem.slug
              }">
              {{ teamItem.name }}
            </li>
            <li
              class="wsl-dropdown-item flex items-center"
              (click)="openCreateTeamModel()">
              <span class="flex-grow">New Team</span>
            </li>
          </ul>
        </div>
        <div class="lg:hidden" wslDropdown *ngIf="data.team?.name">
          <button
            class="wsl-btn-sm wsl-dropdown-toggle group flex cursor-pointer items-center space-x-1 rounded-md bg-white p-2 shadow-sm dark:bg-gray-800 dark:text-gray-300 lg:w-full"
            type="button"
            id="wsl-team-menu-dropdown"
            aria-haspopup="true"
            aria-expanded="false"
            *ngIf="data.tab">
            <ng-icon class="opacity-25" [name]="data.tab.icon" size="1.25rem" />
            <b class="font-medium">{{ data.tab.name }}</b>
            <ng-icon class="opacity-50" name="heroChevronDown" />
          </button>
          <ul
            class="wsl-dropdown-menu left-0 hidden w-48"
            aria-labelledby="wsl-team-menu-dropdown">
            <ng-container *ngFor="let tab of data.tabs">
              <li
                *ngIf="tab.shown"
                [ngClass]="{
                  'bg-gray-200 dark:bg-gray-700': tab.type === data.tab?.type
                }"
                (click)="switchTab(tab.type)"
                class="wsl-dropdown-item flex items-center space-x-2">
                <ng-icon
                  class="wsl-text-muted"
                  [name]="tab.icon"
                  size="1.1rem" />
                <span>{{ tab.name }}</span>
              </li>
            </ng-container>
          </ul>
        </div>
      </div>
    </aside>
    <main class="wsl-min-h-screen-2 container mx-auto space-y-4 px-4 xl:px-8">
      <div [hidden]="data.tab?.type !== 'suites' || !hasData() || hasItems()">
        <app-team-first-suite />
      </div>
      <div [hidden]="data.tab?.type !== 'suites' || !hasData() || !hasItems()">
        <app-team-tab-suites />
      </div>
      <div [hidden]="data.tab?.type !== 'members'">
        <app-team-tab-members />
      </div>
      <div [hidden]="data.tab?.type !== 'settings'">
        <app-team-tab-settings />
      </div>
      <div [hidden]="data.tab?.type !== 'firstTeam'">
        <app-team-first-team />
      </div>
      <div
        [hidden]="data.tab?.type !== 'invitations'"
        *ngIf="data.teams?.invitations">
        <h2 class="pb-1 text-2xl font-semibold text-black dark:text-gray-300">
          Your Invitations
        </h2>
        <div class="p-4">
          <ul class="space-y-4">
            <li
              class="wsl-box flex items-center justify-between p-4"
              *ngFor="let item of data.teams.invitations">
              <p class="text-sm text-black dark:text-gray-300">
                Team
                <b>{{ item.name }}</b>
                wants you to join their team. Would you like to?
              </p>
              <div class="space-x-2">
                <button
                  class="wsl-btn-sm wsl-btn-primary"
                  (click)="accept(item)">
                  Accept
                </button>
                <button
                  class="wsl-btn-sm wsl-btn-secondary"
                  (click)="confirmDecline(item)">
                  Decline
                </button>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div
        [hidden]="data.tab?.type !== 'requests'"
        *ngIf="data.teams?.requests">
        <h2 class="pb-1 text-2xl font-semibold text-black dark:text-gray-300">
          Your Requests
        </h2>
        <div class="p-4">
          <ul class="space-y-4">
            <li
              class="wsl-box flex items-center justify-between p-4"
              *ngFor="let item of data.teams.requests">
              <p class="text-sm text-black dark:text-gray-300">
                You have asked to join team
                <b>{{ item.name }}</b>
                . Now we wait for them to accept your request.
              </p>
              <div class="space-x-2">
                <button
                  class="wsl-btn-sm wsl-btn-muted"
                  (click)="confirmRescind(item)">
                  Cancel Request
                </button>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </main>
  </div>
</div>
